<template>
	<div>
		<!-- <link rel="icon" href="https://smilelife.oss-cn-beijing.aliyuncs.com/web/bitbug_favicon.ico"><title>微笑e生活</title> -->
		欢迎登陆优品钱包运营平台
		<div class="title">
				基础数据
		</div>
		<!-- <div class="box1">
				<div class="box1-list-li">
					<p class="box1-list-li-pir">{{list.totalRegister|NumFormat}}</p>
					<p class="box1-list-li-title">累计注册</p>
				</div>
				<div class="box1-list-li">
					<p class="box1-list-li-pir">{{list.totalCashGrantAmount|NumFormat}}</p>
					<p class="box1-list-li-title">累计放款</p>
				</div>
				<div class="box1-list-li">
					<p class="box1-list-li-pir">{{list.todayRegister|NumFormat}}</p>
					<p class="box1-list-li-title">今日注册</p>
				</div>
				<div class="box1-list-li">
					<p class="box1-list-li-pir">{{list.todayCashGrantAmount|NumFormat}}</p>
					<p class="box1-list-li-title">今日放款</p>
				</div>
				<div class="box1-list-li">
					<p class="box1-list-li-pir">{{list.todayCashGrantCount|NumFormat}}</p>
					<p class="box1-list-li-title">今日借款订单</p>
				</div>
		</div>
		
		<div class="box2">
			<div class="box2left">
				<div class="box2leftlist-l">
					<div class="box2leftlist-l-li">
						<p class="box1-list-li-pir">{{list.yesterdayRegister}}</p>
						<p class="box1-list-li-title">昨日注册</p>
					</div>
					<div class="box2leftlist-l-li">
						<p class="box1-list-li-pir" v-if="list.registerRate"><img v-if="list.registerRate!=0"
								class="box2leftlist-l-li-img"
								:src="list.registerRate>0?'https://nj-hqb.oss-cn-hangzhou.aliyuncs.com/h5/rise.png':'https://nj-hqb.oss-cn-hangzhou.aliyuncs.com/h5/decline.png'" />{{list.registerRate>0?list.registerRate:list.registerRate.replace(/\-/g,'')}}%
						</p>
						<p class="box1-list-li-title">相较前日</p>
					</div>
				</div>
				<div class="box2leftlist-l">
					<div class="box2leftlist-l-li">
						<p class="box1-list-li-pir">{{list.yesterdayCredit}}</p>
						<p class="box1-list-li-title">昨日授信成功</p>
					</div>
					<div class="box2leftlist-l-li">
						<p class="box1-list-li-pir" v-if="list.creditRate"><img v-if="list.creditRate!=0"
								class="box2leftlist-l-li-img"
								:src="list.creditRate>0?'https://nj-hqb.oss-cn-hangzhou.aliyuncs.com/h5/rise.png':'https://nj-hqb.oss-cn-hangzhou.aliyuncs.com/h5/decline.png'" />{{list.creditRate>0?list.creditRate:list.creditRate.replace(/\-/g,'')}}%
						</p>
						<p class="box1-list-li-title">相较前日</p>
					</div>
				</div>
				<div class="box2leftlist-l">
					<div class="box2leftlist-l-li">
						<p class="box1-list-li-pir">{{list.yesterdayCashGrantAmount|NumFormat}}</p>
						<p class="box1-list-li-title">昨日生活费放款</p>
					</div>
					<div class="box2leftlist-l-li">
						<p class="box1-list-li-pir" v-if="list.cashRate"><img v-if="list.cashRate!=0"
								class="box2leftlist-l-li-img"
								:src="list.cashRate>0?'https://nj-hqb.oss-cn-hangzhou.aliyuncs.com/h5/rise.png':'https://nj-hqb.oss-cn-hangzhou.aliyuncs.com/h5/decline.png'" />{{list.cashRate>0?list.cashRate:list.cashRate.replace(/\-/g,'')}}%
						</p>
						<p class="box1-list-li-title">相较前日</p>
					</div>
				</div>
			</div>
		</div> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: {}
			}
		},
		created() {
			// this.getlist()
		},
		filters: {
			NumFormat(value) {
				if (!value) return '0';
				/*原来用的是Number(value).toFixed(0)，这样取整时有问题，例如0.51取整之后为1，感谢Nils指正*/
				var intPart = Number(value) | 0; //获取整数部分
				var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
				var floatPart = ""; //预定义小数部分
				// console.log(888,value)
				// console.log(888,typeof(value))
				var value2Array = value.toString().split(".");
				var isNegtiveNo = ''
				if (intPartFormat == 0) {
					if (value.toString().indexOf('-') != 1) isNegtiveNo = '-' //修复小于0负数丢失的问题
				}
				//=2表示数据有小数位
				if (value2Array.length == 2) {
					floatPart = value2Array[1].toString(); //拿到小数部分
					if (floatPart.length == 1) { //补0,实际上用不着
						return isNegtiveNo + intPartFormat + "." + floatPart + '0';
					} else {
						return isNegtiveNo + intPartFormat + "." + floatPart;
					}
				} else {
					return isNegtiveNo + intPartFormat + floatPart;
				}
			}
		},
		methods: {
			async getlist() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				const {
					data: res
				} = await this.$http.post('/index/getMenuData')
				console.log(res)
				this.list = res.data
				setTimeout(() => {
					loading.close();
				}, 500);
			},
		}
	}
</script>

<style lang="less" scoped>
	.title {
		font-size: 18px;
		color: #333333;
		margin-top: 40px;
	}
	.box1{display: flex;justify-content: space-around;}
	.box1-list {
		display: flex;
		height: 100%;

		
	}
	.box1-list-li {
		padding-top: 20px;
		width: 168px;
		padding-bottom: 20px;
		text-align: center;
		border: 1px solid;
		border-radius: 4px;
		margin-left: 20px;
		margin-top: 20px;
	}
	
	p {
		padding: 0;
		margin: 0;
	}
	
	.box1-list-li:hover {
		box-shadow: 0px 6px 10px 0px rgba(56, 120, 234, 0.16);
		border-radius: 4px;
		border: 1px solid #3878EA;
	
		.box1-list-li-pir {
			font-weight: bold;
		}
	}
	.box2 {
		margin-top: 40px;
	
		.box2left {
			display: flex;
			justify-content: space-around;
			.box2leftlist-l {
				width: 30%;
				height: 104px;
				border: 1px solid #D8D8D8;
				display: flex;
				border-radius: 4px;
				// cursor: pointer;
			}

			p {
				margin: 0;
			}

			.box2leftlist-l-li {
				width: 50%;
				text-align: center;
				padding-top: 24px;

				.box2leftlist-l-li-img {
					width: 14px;
					height: 14px;
					margin-right: 6px;
				}
			}

			.box2leftlist-l:hover {
				box-shadow: 0px 6px 10px 0px rgba(56, 120, 234, 0.16);
				border-radius: 4px;
				border: 1px solid #3878EA;

				.box1-list-li-pir {
					font-weight: bold;
				}
			}
	
		}
	}
</style>
